JavaScript - GoToTop 作法


Posted by hoyi-23 on 2021-06-16

<html>
<a href="#" class="gotop">
    <!--gotopicon-->
</a>
</html>

點擊向上滾動按鈕,執行向上滾動。

<script>
function goTop(e) {
    e.preventDefault();
    if (e.target.offsetParent.classList.value == 'gotop') {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
}
body.addEventListener('click', goTop);
</script>

scroll to top

$(document).ready(function () {
    $(window).scroll(function (e) {
        var scrollY = window.scrollY;
        if (scrollY < 500) {
            $('.top-btn').addClass('show');
        } else{
            $('.top-btn').removeClass('show');
        }

    $('.top-btn').click(function(){
        $('html,body').animate({
          scrollTop: 0
        },1000);
    });

});

#GoToTop







Related Posts

Vue.js 學習旅程Mile 12 – Conditional Rendering 條件渲染篇:v-if、v-show

Vue.js 學習旅程Mile 12 – Conditional Rendering 條件渲染篇:v-if、v-show

Terms of Use 會員服務條款

Terms of Use 會員服務條款

函式原型方法:bind()、call()、apply()

函式原型方法:bind()、call()、apply()


Comments